import { Image, Pressable, StyleSheet, Text, View, ScrollView, TextInput } from 'react-native';
import React, { useState, useEffect } from 'react';
import { deviceStore, observer, webSocketStore } from '~/store';
import { useNavigation, useRoute } from '@react-navigation/native';
import { useTranslation } from 'react-i18next';
import { NavBarHeader } from '~/components';
import { px2dp, width, scale } from '~/utils/px2dp';
import { setBleBloodParams, getBleBloodParams } from '~/utils/ble/application';
import { addDeviceMeasureRecord } from '~/api/deviceApi';

const WatchCalibration = observer(() => {
    const navigation: any = useNavigation();
    const { t } = useTranslation();
    const router: any = useRoute();
    const { systolic, diastolic } = deviceStore.calibration;
    const { linkSubDeviceStatus } = webSocketStore;
    const { type, device_sn, subDevice_sn, device_code } = router.params || {};
    const [formItem, setFormItem] = useState<any>({
        systolic,
        diastolic,
    });
    // 查询血压参数设置
    const getData = () => {
        getBleBloodParams(router.params);
    };
    const onPress = () => {
        if (linkSubDeviceStatus == 0 && deviceStore.device.connectedDeviceStatus == 0) {
            Toast.show({ content: t('WatchCalibration.t9') });
            return;
        }
        if (
            formItem.systolic >= 70 &&
            formItem.systolic <= 180 &&
            formItem.diastolic >= 40 &&
            formItem.diastolic <= 120
        ) {
            setBleBloodParams(formItem.systolic, formItem.diastolic, router.params);
            addDeviceMeasureRecord({
                device_sn: subDevice_sn,
                diastole: formItem.diastolic,
                systolic: formItem.systolic,
            }).then((res) => {
                Toast.show({ content: t('WatchCalibration.t10') });
                getData();
            });
        } else {
            Toast.show({ content: t('WatchCalibration.t11') });
        }
    };

    useEffect(() => {
        getData();
    }, []);
    useEffect(() => {
        if (systolic > 0 && diastolic > 0) {
            setFormItem({
                ...formItem,
                systolic,
                diastolic,
            });
        }
    }, [systolic, diastolic]);
    return (
        <View style={styles.container}>
            <NavBarHeader
                title={t('WatchCalibration.title')}
                rightComponent={
                    <Pressable
                        style={{ marginRight: px2dp(32) }}
                        onPress={() => navigation.navigate('CalibrationHitory', { device_sn: subDevice_sn })}>
                        <Text style={{ color: '#1877FF' }}>{t('WatchCalibration.t1')}</Text>
                    </Pressable>
                }
            />
            <ScrollView contentContainerStyle={styles.contentContainerStyle} showsVerticalScrollIndicator={false}>
                <Image
                    style={styles.cover}
                    source={{
                        uri: 'https://bjy-dev.oss-cn-shenzhen.aliyuncs.com/xcx/images/20220124/calibrationimg.png',
                    }}
                />
                <Text style={styles.tip1}>
                    {t('WatchCalibration.t2')}
                    <Text style={styles.tip2}>{t('WatchCalibration.t3')}</Text>
                    {t('WatchCalibration.t4')}
                </Text>
                <Text style={styles.tip3}>{t('WatchCalibration.t5')}</Text>
                <View style={styles.list}>
                    <Text style={styles.title}>{t('WatchCalibration.t6')}：</Text>
                    <View style={styles.borderList}>
                        <TextInput
                            style={styles.input}
                            value={String(formItem.systolic)}
                            onChangeText={(value) =>
                                setFormItem({
                                    ...formItem,
                                    systolic: value,
                                })
                            }
                            maxLength={3}
                            keyboardType="numeric"
                            placeholderTextColor={'#191919'}
                        />
                    </View>
                    <Text style={styles.title}>mmHg</Text>
                </View>
                <View style={styles.list}>
                    <Text style={styles.title}>{t('WatchCalibration.t7')}：</Text>
                    <View style={styles.borderList}>
                        <TextInput
                            style={styles.input}
                            value={String(formItem.diastolic)}
                            onChangeText={(value) =>
                                setFormItem({
                                    ...formItem,
                                    diastolic: value,
                                })
                            }
                            maxLength={3}
                            keyboardType="numeric"
                            placeholderTextColor={'#191919'}
                        />
                    </View>
                    <Text style={styles.title}>mmHg</Text>
                </View>
                <Pressable style={styles.bootom_button} onPress={onPress}>
                    <Text style={styles.bootom_buttonText}>{t('WatchCalibration.t8')}</Text>
                </Pressable>
            </ScrollView>
        </View>
    );
});
export default WatchCalibration;

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
    },
    contentContainerStyle: {
        paddingBottom: '20%',
        flexGrow: 1,
        paddingHorizontal: px2dp(32),
    },
    cover: {
        width: width - px2dp(64),
        borderRadius: px2dp(20),
        height: px2dp(400),
        marginBottom: px2dp(32),
    },
    tip1: {
        color: '#191919',
        lineHeight: px2dp(40),
    },
    tip2: {
        fontWeight: 'bold',
    },
    tip3: {
        fontWeight: 'bold',
        color: '#191919',
        lineHeight: px2dp(40),
        marginTop: px2dp(32),
    },
    bootom_button: {
        backgroundColor: '#1877FF',
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: px2dp(16),
        height: px2dp(100),
        marginTop: '18%',
        width: '100%',
    },
    bootom_buttonText: {
        color: '#fff',
        fontSize: scale(32),
        fontWeight: 'bold',
    },
    list: {
        flexDirection: 'row',
        alignItems: 'flex-end',
        marginTop: 22,
        justifyContent: 'space-between',
    },
    title: {
        color: '#656565',
        fontSize: 14,
    },
    borderList: {
        borderWidth: 0.4,
        borderColor: '#000',
        width: 160,
        height: 60,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#fff',
        borderRadius: 8,
        marginHorizontal: 20,
    },
    input: {
        fontSize: scale(40),
        color: '#000',
    },
});
